<template>
    <div id="rich"></div>
  </template>
  
  <script setup>
  import { onMounted, onUnmounted } from "vue";
  import * as echarts from "echarts";
  let myRich = null;
  let myEchart = null;
  onMounted(() => {
    myRich = document.getElementById("rich");
    myEchart = echarts.init(myRich);
    let option = {
      series: [
        {
            type: 'sunburst',
            data: [
                {
                    name: '优秀',
                    value: 100,
                    children: [
                        {
                            name: '95-100',
                            value: 40
                        },
                        {
                            name: '90-95',
                            value: 60
                        }
                    ]
                },
                {
                    name: '良好',
                    value: 200,
                    children: [
                        {
                            name: '85-95',
                            value: 100
                        },
                        {
                            name: '80-85',
                            value: 20
                        }
                    ]
                },
                {
                    name: '及格',
                    value: 50
                },
                {
                    name: '不及格',
                    value: 80
                }
            ]
        }
      ]
    };
    myEchart.setOption(option);
  });
  onUnmounted(() => {
    myEchart.dispose(myRich);
  });
  </script>
  
  <style lang="less" scoped>
  #rich {
    width: 800px;
    height: 400px;
  }
  </style>
  